<template>
  <echartsView :loading="loading" :options="options"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
import { getStaticHouse } from '@/api/followUpManagement'
export default {
  components: {
    echartsView
  },
  props: {
    strContent: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  watch: {
    strContent: {
      deep: true,
      handler (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      loading: false,
      options: {
        title: {
          text: '房源统计',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 垂直显示
          y: 'center', // 延Y轴居中
          x: 'left', // 居左显示
          padding: -0.5 // 调节legend的位置
        },
        series: [
          {
            name: '房源统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            data: [],
            top: '5%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.fetchData()
    })
  },
  methods: {
    fetchData () {
      this.loading = true
      const { Status, PactClass } = this.strContent
      getStaticHouse({
        status: Status || '',
        pactClass: PactClass || ''
      })
        .then((res) => {
          const nameMap = new Map([
            ['EarlyStage', '前期(未移交)'],
            ['Vacant', '空置(已移交)'],
            ['Leasing', '租赁中'],
            ['TCTK', '退出腾空'],
            ['TCZY', '退出占用'],
            ['FGZF', '非公租房'],
            ['FZZGZF', '非住宅公租房'],
            ['GYCQGZF', '共有产权公租房'],
            ['QYTZ', '企业统租'],
            ['FPRZ', '分配入住'],
            ['TZTT', '通知腾退'],
            ['Other', '其他']
          ])
          const data = []
          for (const key in res) {
            const value = Number(res[key])
            const name = nameMap.get(key)
            data.push({
              value,
              name
            })
          }
          this.options.series[0].data = data
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
</style>
